<template>
  <div class="header">
    <div class="line"></div>
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="0"
        ><img :class="logo.cls" :src="logo.path"
      /></el-menu-item>
      <el-menu-item index="1">首页</el-menu-item>
      <el-submenu index="2">
        <template slot="title">操作</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
      </el-submenu>
      <el-menu-item index="3">关于</el-menu-item>
      <el-menu-item index="-1"
        ><el-input placeholder="请输入内容" v-model="search" clearable>
        </el-input
      ></el-menu-item>

      <el-button type="text" v-if="isauthen" @click="btnClick('1')" index="r"
        >注册</el-button
      >
      <el-button type="text" v-if="isauthen" @click="btnClick('2')" index="l"
        >登录</el-button
      >

      <el-dropdown v-if="!isauthen" @command="btnClick">
        <span class="el-dropdown-link userinfo">
          <!-- 欢迎：王晓晓<i class="el-icon-arrow-down el-icon--right"></i> -->
          <el-image
            class="hImg"
            :src="headerImg"
            :preview-src-list="srcList"
            fit="full"
            justify="center"
            lazy
          >
          </el-image>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a">个人中心</el-dropdown-item>
          <el-dropdown-item command="b">修改密码</el-dropdown-item>
          <el-dropdown-item command="c">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-menu>
  </div>
</template>

<script>
import vFooter from "@/components/Footer";
import logo from "@/assets/logo.png";

export default {
  name: "Header",
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      isauthen: false,
      search: "",
      headerImg:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      ],
      logo: {
        cls: "logo",
        path: logo,
      },
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      // 路由信息跳转
      // console.log(key);
      // console.log(key);
      if ("1" == key) {
        this.$router.push("/home");
      } else if ("3" == key) {
        this.$router.push("/home/about");
      }  else if ("2-1" == key) {
        this.$router.push("/home/article");
      }else if ("2-3" == key) {
        this.$router.push("/home");
      } else if ("2-2" == key) {
        this.$router.push("/home/article");
      } else {
        this.$router.push("/home");
      }
    },
    btnClick(v) {
      this.isauthen = !this.isauthen;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.logo {
  height: 60%;
}

.userinfo {
  color: #fff;
}

.hImg {
  width: 2em;
  height: 2em;
  border-radius: 10em;
  border: solid 0.2em rgb(135, 67, 199);
  /* padding-top: 2em; */
}
</style>
